<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书类型管理</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4">
        <div class="df-aic ">
            <span>类型名称</span>
            <el-input placeholder="请输入类型名称" size="small" style="width:200px;" class="ml-2" v-model="queryParam.name" @keyup.native.enter="getTableDataMethod(true)"></el-input>
            <el-button type="primary" size="small" class="ml-2" @click="getTableDataMethod(true)">搜索</el-button>
            <el-button type="success" size="small" class="ml-2" @click="showAddOrEditTypeDialogMethod('添加')">添加</el-button>
        </div>
        <el-table :data="tableData" v-loading="tableDataLoading" class="mt-4">
            <el-table-column prop="id" label="类型编号" width="150"></el-table-column>
            <el-table-column prop="name" label="类型名称"></el-table-column>
            <el-table-column prop="parentId" label="父类型编号" width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.parentId">
                        {{scope.row.parentId}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="parentName" label="父类型名称"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="showAddOrEditTypeDialogMethod('修改',scope.row)">编辑</el-button>
                    <el-popconfirm :title='"是否删除类型编号为"+scope.row.id+"的数据？"'
                                   @confirm="deleTypeMethod(scope.row)">
                        <el-button slot="reference" type="danger" size="small" v-loading="deleteLoading">删除</el-button>
                    </el-popconfirm>

<!--                    <el-button size="small" type="danger" @click="deleTypeMethod(scope.row)" >删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
    </div>


    <el-pagination background layout="total,sizes,prev, pager, next" :total="tableDataPaging.total"
                   :page-sizes="[10, 20, 50]"
                   prev-text="上一页" next-text="下一页"
                   :page-size="tableDataPaging.pageSize"
                   :current-page="tableDataPaging.currentPage"
                   @current-change="tableDataPagingChange"
                   @prev-click="tableDataPagingChange" @next-click="tableDataPagingChange"
                   @size-change="tableDataPagingSizeChange"
                   style="float:right;margin-top: 40px;padding-bottom:50px;">
    </el-pagination>

    <el-dialog :title="addOrEditTypeDialogTitle + '图书类型'" :visible.sync="addOrEditTypeDialogVisible" width="600px" :close-on-click-modal="false">
        <div class="df-aic-jcc">
            <el-form ref="addOrEditTypeForm" :model="addOrEditTypeForm" label-width="100px">
                <el-form-item label="类型编号：" v-if="addOrEditTypeForm.id" prop="id"><!--修改的时候才会出现-->
                    <el-input v-model="addOrEditTypeForm.id" size="small" style="width:200px;" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型名称：" prop="name">
                    <el-input v-model="addOrEditTypeForm.name" size="small" style="width:200px;" placeholder="请输入类型名称"></el-input>
                </el-form-item>
                <el-form-item label="父类型：" prop="parentId"><!--下拉选-->
                    <el-select v-model="addOrEditTypeForm.parentId" placeholder="请选择父类型" size="small" filterable style="width:200px;">
                        <el-option
                                v-for="item in allTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addOrEditTypeSaveMethod">确 定</el-button>
            <el-button @click="addOrEditTypeDialogVisible = false">取 消</el-button>
        </span>

    </el-dialog>
</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                queryParam : {
                    name:"",
                },
                tableData : [],
                tableDataLoading : false,
                tableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                deleteLoading : false,
                addOrEditTypeDialogVisible : false,
                addOrEditTypeDialogTitle : "",
                addOrEditTypeForm : {
                    id : "",
                    name : "",
                    parentId : ""
                },
                allTypeList:[],
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.getTableDataMethod();
                this.getAllTypeListMethod();

            });
        },
        methods: {
            tableDataPagingChange(val) {
                let that = this;
                that.tableDataPaging.currentPage = val;
                that.getTableDataMethod();
            },
            tableDataPagingSizeChange(val) {
                let that = this;
                that.tableDataPaging.pageSize = val;
                that.getTableDataMethod();
            },

            //获取表格的数据
            getTableDataMethod(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.tableDataPaging.currentPage = 1;
                }
                const {name} = this.queryParam
                let queryData = {
                    name: $.trim(name),
                    pageNum: this.tableDataPaging.currentPage,
                    pageSize: this.tableDataPaging.pageSize,
                }
                this.tableDataLoading = true;
                that.tableData = [];
                axios.post('/type/getTypeList', queryData)
                    .then(result => {
                        let res = result.data;
                        this.tableDataLoading = false;
                        if (res.code === 0) {
                            that.tableData = res.data.list;
                            that.tableDataPaging.total = res.data.total;
                        }
                    }).catch(error => {
                    console.error(error)
                    this.tableDataLoading = false
                })
            },

            //删除图书类型的方法
            deleTypeMethod(row){
                let that = this;
                if(!row.id){
                    that.$message.error("尚无id");
                    return;
                };
                that.deleteLoading = true;
                requestApiTB("type/delTypeById",{"id" : row.id}, "POST", function(res){
                    that.deleteLoading = false;
                    if(res.code === 0){
                        that.$message.success("删除成功");
                        that.getTableDataMethod(true);
                    }else{
                        that.$message.error(res.msg);
                    }
                });

            },

            // 展示新增或者删除图书类型的对话框
            showAddOrEditTypeDialogMethod(title,row){
                let that = this;
                that.addOrEditTypeDialogVisible = true;
                this.$nextTick(function () {
                    this.$refs['addOrEditTypeForm'].resetFields();
                    //Object.assign(this.$data.addOrEditTypeForm, this.$options.data().addOrEditTypeForm);//还原数据
                    if(row){
                        let deepCopyRow = JSON.parse(JSON.stringify(row));
                        that.addOrEditTypeForm = deepCopyRow;//深拷贝一下
                        that.addOrEditTypeForm.parentId = deepCopyRow.parentId ;
                    }else{
                        that.addOrEditTypeForm.parentId = 0;
                    }
                    that.addOrEditTypeDialogTitle = title;

                });
            },

            //获取所有的图书类型的数据
            getAllTypeListMethod(){
                let that = this;
                that.allTypeList = [];
                requestApiTB("type/getAllTypeList",{}, "POST", function(res){
                    if(res.code === 0){
                        that.allTypeList = res.data;
                        that.allTypeList.unshift({
                            "id" : 0,
                            "name" : "无"
                        })
                    }
                });
            },

            //图书类型的保存的方法
            addOrEditTypeSaveMethod(){
                let that = this;
                let url = "";
                if(!that.addOrEditTypeForm.name){
                    that.$message.error("请填写类型名称");
                    return;
                }
                if(!that.addOrEditTypeForm.id){
                    url = "type/addType";
                }else {
                    url = "type/editTypeById";
                    if(!that.addOrEditTypeForm.id){
                        that.$message.error("请传递id");
                        return;
                    }
                }
                requestApiTB(url,that.addOrEditTypeForm, "POST", function(res){
                    if(res.code === 0){
                        that.addOrEditTypeDialogVisible = false;
                        that.$message.success("操作成功");
                        that.getTableDataMethod();
                    }else{
                        that.$message.error(res.msg);
                    }
                });

            }


        }
    })
</script>
</html>